<template>
  <div>
      <el-tabs v-model="activeName" style="height: 80vh;padding-top: 10px;">
        <el-tab-pane label="服务券配额" name="couponApply">
          <CouponApply />
        </el-tab-pane>
        <el-tab-pane label="服务商申请" name="serviceCompanyApply">
          <ServiceCompanyApply />
        </el-tab-pane>
      </el-tabs>
  </div>
</template>
<script>
import CouponApply from './components/couponApply'
import ServiceCompanyApply from './components/serviceCompanyApply'
export default {
  data() {
    return {
      activeName: 'couponApply'
    }
  },
  components: {
    CouponApply,
    ServiceCompanyApply
  },
  watch: {
    '$route': {
      immediate: true,
      deep: true,
      handler(to, from) {
        console.log('$route',to,from);
        if (to.params?.page==='serviceCompanyApply') {
          this.activeName='serviceCompanyApply'
        }
        if (to.query?.page==='serviceCompanyApply') {
          this.activeName='serviceCompanyApply'
        }
      }
    }
  },
  created() {
  },
  methods: {

  }
}
</script>

<style scoped lang="scss">
@import "@/assets/css/element-variables";

:deep(.el-tabs__nav-scroll) {
  padding-left: 40px;
}

:deep(.el-tabs--border-card .el-tabs__nav-scroll) {
  padding-left: 0;
}

:deep(.el-tabs__item.is-active) {
  font-weight: bold;
}

:deep(.el-tabs__active-bar) {
  background-color: $--color-primary;
}

:deep(.el-tabs__content) {
    height: calc(100% - 65px);
    overflow: auto;
}

:deep(.el-tab-pane) {
  height: 100%;
}
</style>
